<template>
	<view class="">
		<!-- <search></search> -->
		<view class="search">
			<!-- 分类 -->
			<view class="classify" @tap="changeDraw">
				<i class="icon">&#xe649;</i>
				<view class="classify_item">
					分类
				</view>
			</view>
			<view class="search_input">
				<input class="search_input_input" 
				type="text" style="width: 200upx;" 
				v-model="search_content"
				placeholder-class="place" 
				placeholder="儿童加绒外套49.9" />
				<i class="icon search_icon"> &#xe605; </i>
				<i class="icon error_icon" @tap="clear" v-if="search_content"> &#xe66f; </i>
			</view>
			<view class="btn" v-if="search_content">
				确定
			</view>
			<view class="classify" @tap="changeList">
				<i class="icon" v-if="!listBoxFlag">&#xe736;</i>
				<i class="icon" v-else>&#xe737;</i>
				<view class="classify_item">
					列表
				</view>
			</view>
		</view>
		<!-- 导航 -->
		<view class="nav">
			<view :class="['nav_item', navindex == index? 'nav_item_item': '']" @tap="changenav(index)" v-for="(item, index) in navlist">
				{{item.title}}
				<view class="" v-if="index != 2">
					<image v-if="navindex == index"  :src="item.pic2" mode=""></image>
					<image v-else :src="item.pic1" mode=""></image>
				</view>
				<view class="" v-else>
					<image v-if="!arrangeflag"  :src="item.pic2" mode=""></image>
					<image v-else :src="item.pic1" mode=""></image>
				</view>
			</view>
		</view>
		<view class="product" v-if="listBoxFlag">
			<view class="list" v-for="(item,index) in productList" @tap="toproductdetail(index)">
				<view class="pic">
					<image :src="item.pic" mode=""></image>
				</view>
				<view class="info">
					<view class="info_tilte">
						{{item.title}}
					</view>
					<view class="desc">
						{{item.desc}}
					</view>
					<view class="num">
						月销量{{item.num}}
					</view>
					<view class="price">
						<text class="price_now">￥{{item.price}}</text>
						<text class="price_line">￥{{item.line_price}}</text>
					</view>
					<view class="addcart">
						<image src="../../static/image/mine/index/add.png" mode=""></image>
					</view>
					<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
				</view>
			</view>
		</view>
		<product-two v-else 
		@toproductdetail = "toproductdetail"
		:productList = "productList"></product-two>
		<!-- 抽屉导航 -->
		<uni-drawer :visible="drawFlag" :mask="true" mode="left" @close="closeDrawer">
		   <scroll-view class="navigation" scroll-y>
			   <view class="draw_navigation" v-for="(nav,index) in navList">
					<view :class="['draw_navigation_one',navigitionOne == index && navigitionTwo == 'undefined' ? 
						'navigation_i':'']"
						@tap="toNavigition(index)"
						>
						{{nav.navtitle}}
					</view>
					<view class="draw_navigation_two">
						<view 
						:class="['draw_navigation_two_item',
						navigitionOne == index && navigitionTwo == key ? 
						'navigation_i':'']" 
						@tap="toNavigition(index,key)"
						v-for="(navTwo,key) in nav.classTwo">
							{{navTwo.title}}
						</view>
					</view>
			   </view>
		   </scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	import productTwo from '@/components/classify/productwo.vue'
	import search from '@/components/classify/search.vue'
	import uniDrawer from '@/components/uni-drawer/uni-drawer.vue'
	export default {
		components: {
			search,
			productTwo,
			uniDrawer
		},
		data () {
			return {
				search_content: '',
				arrangeflag: true,
				navigitionOne: '',
				navigitionTwo: '',
				listBoxFlag: false,
				drawFlag: false,
				navlist: [
					{
						title: '默认排序',
						pic1: '../../static/image/mine/index/classify01.png',
						pic2: '../../static/image/mine/index/classify11.png'
					},
					{
						title: '筛选',
						pic1: '../../static/image/mine/index/classify02.png',
						pic2: '../../static/image/mine/index/classify12.png'
					},
					{
						title: '列表',
						pic1: '../../static/image/mine/index/classify03.png',
						pic2: '../../static/image/mine/index/classify13.png'
					}
				],
				navindex: 0,
				productList: [
					
						{
							pic:'../../static/image/mine/index/groupbooking04.png',
							title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
							desc:'品质保障 美味新鲜',
							price:'129.00',
							line_price:'199.00',
							num:'1'
						},
						{
							pic:'../../static/image/mine/index/groupbooking02.png',
							title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
							desc:'品质保障 美味新鲜',
							price:'129.00',
							line_price:'199.00',
							num:'2'
						},
					
					
						{
							pic:'../../static/image/mine/index/groupbooking03.png',
							title: '临潼石榴老树新鲜包邮应季天水果3-10斤',
							desc:'品质保障 美味新鲜',
							price:'129.00',
							line_price:'199.00',
							num:'1'
						}
					
				],
				navList: [
					{
						navtitle: '蔬菜水果',
						classTwo : [
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '肉禽水产',
						classTwo : [
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '粮油副食',
						classTwo : [
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					},
					{
						navtitle: '蔬食素食',
						classTwo : [
							{
								title: '根茎类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '苹果/梨',
								pic: '../../static/image/mine/integral/product12.png'
							},
							{
								title: '瓜类',
								pic: '../../static/image/mine/integral/product11.png'
							},
							{
								title: '芒果',
								pic: '../../static/image/mine/integral/product12.png'
							}
						]
					}
				]
			
			}
		},
		onLoad(options) {
			this.navigitionOne = options.navid
			this.navigitionTwo = options.productid
			console.log(this.navigitionTwo);
		},
		methods: {
			changeDraw () {
				console.log(111);
				this.drawFlag = true
			},
			// 抽屉导航跳转
			toNavigition (index,key) {
				uni.redirectTo({
					url: '/pageB/classify/procudt?navid='+index + '&productid='+key
				})
			},
			// 关闭抽屉导航时触发
			closeDrawer () {
				this.drawFlag = false
			},
			// 改变列表的排列方式
			changeList () {
				this.listBoxFlag = !this.listBoxFlag
			},
			// 清空搜索框内容
			clear() {
				this.search_content = ''
			},
			changenav (index) {
				this.navindex = index
				if(index == 2) {
					this.arrangeflag = !this.arrangeflag
				}
			},
			toproductdetail (index) {
				uni.navigateTo({
					url: '/pageB/classify/productdetail?id='+index + '&type='+ '0'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {
		width: 100%;
		height: 100upx;
		background-color: #f83e2f;
		padding: 0 10upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		.search_input {
			flex: 1;
			height: 60upx;
			background-color: #ff6b4d;
			position: relative;
			.search_input_input {
				width: 100% !important;
				height: 100%;
				background-color: #ff6b4d;
				border-radius: 8upx;
				font-size: 28upx;
				color: #F1F1F1;
				padding-left: 50upx;
				box-sizing: border-box;
			}
			.search_icon {
				position: absolute;
				left: 10upx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28upx;
				height: 28upx;
				color: #fff;
			}
			.error_icon {
				position: absolute;
				right: 10upx;
				top: 50%;
				transform: translateY(-50%);
				font-size: 28upx;
				color: #F1F1F1;
			}
		}
		.btn {
			width: 80upx;
			height: 60upx;
			border-radius: 10upx;
			background-color: #fd9177;
			color: #F1F1F1;
			font-size: 28upx;
			text-align: center;
			line-height: 60upx;
			margin-left: 20upx;
		}
		.classify {
			width: 80upx;
			height: 60upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.icon {
				font-size: 24upx;
				color: #F1F1F1;
			}
			.classify_item {
				font-size: 24upx;
				color: #F1F1F1;
				line-height: 24upx;
			}
		}
	}
	.nav {
		width: 100%;
		height: 84upx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		border-bottom: 2upx solid #E1E1E1;
		background-color: #FFFFFF;
		.nav_item {
			flex: 1;
			height: 32upx;
			font-size: 28upx;
			color: #333333;
			text-align: center;
			border-right: 2upx solid #E1E1E1;
			line-height: 32upx;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 28upx;
				height: 28upx;
				margin-left: 8upx;
			}
		}
		.nav_item:last-child {
			border-right: none;
		}
		.nav_item_item {
			color: #fc5c2f;
		}
	}
	.product {
		background-color: #FFFFFF;
		padding: 0 15upx;
		box-sizing: border-box;
	}
	.list {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pic {
			width: 180upx;
			height: 180upx;
			margin-right: 20upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.info {
			flex: 1;
			position: relative;
			padding: 20upx 0;
			box-sizing: border-box;
			border-bottom: 2upx solid #E1E1E1;
			.info_tilte {
				font-size: 28upx;
				color: #333333;
				line-height: 40upx;
				height: 80upx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				// height: 80upx;
			}
			.desc {
				font-size: 24upx;
				color: #666;
				line-height: 32upx;
			}
			.num {
				font-size: 24upx;
				color: #999;
				margin-top: 20upx;
			}
			.price {
				.price_now {
					font-size: 28upx;
					color: #f73e2f;
					line-height: 40upx;
				}
				.price_line {
					font-size: 24upx;
					color: #999;
					line-height: 40upx;
					text-decoration: line-through;
					margin-left: 10upx;
				}
			}
			.addcart {
				position: absolute;
				bottom: 30upx;
				right: 0;
				width: 52upx;
				height: 52upx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.add_delet {
				position: absolute;
				bottom: 20upx;
				right: 0;
				.delet {
					text-align: right;
					.icon {
						font-size: 28upx;
						color: #999999;
					}
				}
				.add {
					.icon {
						font-size: 28upx;
						color: #999999;
					}
					text {
						font-size: 28upx;
						margin: 0 10upx;
					}
				}
			}
		}
		
	}
	.list:last-child .info {
		border-bottom: none;
	}
	.navigation {
		height: 100%;
	}
	.draw_navigation {
		.draw_navigation_one {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			font-size: 32upx;
			color: #000000;
			padding-left: 30upx;
			box-sizing: border-box;
			border-bottom: 2upx solid #E1E1E1;
			font-weight: bold;
		}
		.navigation_i {
			color: #f73e2f;
		}
		.draw_navigation_two {
			padding-left: 30upx;
			padding-top: 20upx;
			box-sizing: border-box;
			.draw_navigation_two_item {
				font-size: 28upx;
				color: #333333;
				line-height: 60upx;
			}
			.navigation_i {
				color: #f73e2f;
			}
		}
	}
</style>
